<template>
  <el-form :model="_form" inline size="small">
    <el-form-item>
      <el-select v-model="_form.clsId" placeholder="选择分类查询" clearable @change="search">
        <el-option value>请选择分类</el-option>
        <el-option v-for="item in clsOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, PropType } from 'vue'

import IBaseObj from '#/index'

const props = defineProps({
  form: {
    type: Object,
    required: true,
  },
  clsOptions: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
})

const emits = defineEmits(['search', 'update:form'])

const search = () => {
  emits('search')
}

const _form: IBaseObj = computed({
  get() {
    return props.form
  },
  set(val) {
    emits('update:form', val)
  },
})
</script>
